<template>
	<view class="box">
		<view class="top">
			<view class="up">
				<image src="../static/r1.png" class="img"></image>
				<view class="item">
					<view class="name">
            彩蛋总额
					</view>
					<view class="number">
						{{total}}
					</view>
				</view>
				<view class="item">
					<view class="name">
            剩余天数
					</view>
					<view class="number">
						{{endDay}}
					</view>
				</view>
			</view>
		</view>
    <view class="tabs">
      <view class="item" v-for="(item,index) in tabList" :key="index"
            @click="handleTab(index)"
            :class="index === 0 ? 'b-c-F7':'b-c-0F'">
        <image class="img" :src="item.img"></image>
        <text class="title">{{item.title}}</text>
      </view>
    </view>
		<view class="content">
			<view class="title">
				明细
			</view>
      <view class="none" v-if="!list.length" >
        <view class="none-view">
          <image src="../../../static/image/none.png" class="none-image"></image>
          <view class="none-name">
            暂无相关数据~
          </view>
        </view>-
      </view>
      <view v-else class="list" v-for="(item,index) in list" :key="index">
        <view class="left">
          <view class="pic">
            <image class="img" :src="img_pre + item.head_image"></image>
          </view>
          <view class="content-box">
            <view class="title">{{ `${item.username}(${item.title})` }}</view>
            <view class="time">{{ item.time }}</view>
          </view>
        </view>
        <view class="right">{{ item.flag === 'IN' ? '+1' : '-1' }}</view>
      </view>
		</view>
    <u-popup v-model="award" close-icon-pos="top-left" :closeable="true" borderRadius="10" mode="bottom">
      <view class="harvest">
        <view class="popup_top"></view>
        <view class="_view">
          <view class="title">
            恭喜您
          </view>
          <view class="reward-Star">
            <image class="img" src="../static/rewardStar.png"></image>
            <view class="text">
              您已获得奖励
            </view>
          </view>
        </view>
        <button type="default" class="button" @click="award = false">我知道了</button>
        <view class="popup_top"></view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				info: {},
        tabList: [
          {img:'../static/gift.png',title:'领取彩蛋'},
          {img:'../static/recordGift.png',title:'领取记录'},
        ],
        endDay: 0,
        total: 0,
				list: [],
        award: false,
				page:1
			}
		},
		onLoad(option) {
			than = this;
      than.page = 1
			than.post('api/goldbean/colorEgg', null, function(data) {
				than.info = data;
			})
			// than.getList()
			than.getDobDetails()
      than.getGivecolorEgg()
		},
		onReachBottom() {
			than.page++;
			// than.getList()
			than.getGivecolorEgg()
		},
		methods: {
      /**
       * 获取彩蛋池头部
       */
      getDobDetails() {
        than.post("api/ticket/colorEgg", {}, function(data) {
          const { endday, total } = data
          than.endDay = endday
          than.total = total
        })
      },
      /**
       * 获取彩蛋池列表
       */
      getGivecolorEgg() {
        than.post("api/ticket/underGivecolorEgg", {
          page: than.page
        }, function(data) {
          than.list = data.list
        })
      },
			getList() {
				than.post("api/goldbean/underGivecolorEgg", {
					page: than.page
				}, function(data) {
					if (than.page == 1) {
						than.list = data.list;
					} else {
						than.list = than.list.concat(data.list)
					}
				})
			},
      /**
       * 点击tab
       * @param index
       */
      handleTab(index) {
			  switch (index) {
			    case 0:
            than.post("api/Gashapon/extractGashapon", {
              shake_type: '3'
            }, function(data) {
              than.award = true
            })
          break;
          case 1:
            than.toPage('/pages/htmlH/luck/detailed')
          break;
        }
      },
		}
	}
</script>

<style lang="less" scoped>
	.box {
    min-height: 100vh;
		background: #FFFFFF;
	}

	.content {
    background: #FAFAFA;
    padding: 0 39rpx;
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 46px;
		}

    .list {
      padding: 32rpx 31rpx 32rpx 23rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .left {
        display: flex;
        align-items: center;
        .pic {
          width: 99rpx;
          height: 99rpx;
          margin-right: 20rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .content-box {
          .title {
            line-height: 60rpx !important;
            font-size: 30rpx;
            color: #666666;
          }
          .time {
            font-size: 24rpx;
            color: #8B93A2;
          }
        }
      }
      .right {
        font-size: 36rpx;
        color: #FD3D28;
      }
    }
	}

	.top {
    margin: 0 39rpx;
    background: #3476FE;
		border-radius: 12rpx;
    padding: 80rpx 39rpx;
    box-shadow: 0 8rpx 8rpx 0 rgba(52, 118, 254, 0.5);

		.up {
			display: flex;
			align-items: center;
      color: #FFFFFF;

			.img {
				width: 84rpx;
				height: 84rpx;
			}

			.item {
        margin: 0 54rpx 0 29rpx;
				width: 240rpx;
        font-size: 32rpx;

				.number {
					font-size: 60rpx;
					font-family: Myriad Pro;
					font-weight: bold;
				}
			}
		}

	}

  .tabs {
    margin: 0 39rpx;
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      padding: 39rpx 108rpx 42rpx 33rpx;
      font-size: 32rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      .img {
        width: 44rpx;
        height: 44rpx;
        margin-right: 21rpx;
      }
    }
  }
  .b-c-F7 {
    background-color: #FFF7ED;
  }
  .b-c-0F {
    background-color: #F0FFFF;
  }
  .harvest {
    text-align: center;

    .popup_top {
      height: 30rpx;
    }

    ._view {
      background: #FFFFFF;
      margin: 0 30rpx 30rpx;
      padding-bottom: 20rpx;

      .reward-Star {
        width: 100%;
        text-align: center;
        .img {
          width: 426rpx;
          height: 391rpx;
          margin-bottom: -120rpx;
        }
        .text {
          color: #666666;
          font-size: 28rpx;
          text-align: center;
          .number {
            color: #FB683D;
            font-size: 64rpx;
            text-align: center;
          }
        }
      }

      .title {
        height: 111rpx;
        line-height: 111rpx;
        text-align: center;
        border-bottom: 2rpx solid #F6F6F6;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
    }

    .button {
      margin: 71rpx auto 0;
      width: 245rpx;
      height: 74rpx;
      background: #FB683D;
      border-radius: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 74rpx;
    }

  }
</style>
